<template>
  <div class="data-entry-container">
    <el-card class="data-entry-card">
      <!-- 标题 -->
      <h1 class="data-entry-title">数据录入</h1>

      <!-- JSON 输入框 -->
      <el-input
        type="textarea"
        v-model="jsonInput"
        :rows="10"
        placeholder="请输入 JSON 格式的故障排查数据..."
        class="json-input"
      ></el-input>

      <!-- 保存按钮 -->
      <el-button
        type="primary"
        @click="saveData"
        class="save-button"
        :loading="isLoading"
      >
        保存数据
      </el-button>

      <!-- 消息提示 -->
      <el-alert
        v-if="message"
        :title="message"
        :type="messageClass"
        show-icon
        :closable="false"
        class="message-alert"
      ></el-alert>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      jsonInput: '', // JSON 输入内容
      message: '', // 提示消息
      messageClass: '', // 消息类型（success/error）
      isLoading: false, // 保存按钮的加载状态
    };
  },
  methods: {
    async saveData() {
      this.isLoading = true; // 开始加载
      try {
        const data = JSON.parse(this.jsonInput); // 解析 JSON
        const response = await this.$request.post('/tpa/api/save_data/', data); // 发送请求
        this.showMessage(response.message, 'success'); // 显示成功消息
      } catch (error) {
        this.showMessage('JSON 格式错误或保存失败', 'error'); // 显示错误消息
      } finally {
        this.isLoading = false; // 结束加载
      }
    },
    showMessage(message, type) {
      this.message = message;
      this.messageClass = type;
      setTimeout(() => {
        this.message = ''; // 3 秒后清除消息
      }, 3000);
    },
  },
};
</script>

<style scoped>
.data-entry-container {
  padding: 20px;
  display: flex;
  justify-content: center;
}

.data-entry-card {
  width: 100%;
  max-width: 800px;
  padding: 20px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.data-entry-title {
  text-align: center;
  margin-bottom: 20px;
  font-size: 24px;
  color: #303133;
}

.json-input {
  margin-bottom: 20px;
}

.save-button {
  width: 100%;
  margin-bottom: 20px;
}

.message-alert {
  margin-top: 20px;
}
</style>